<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>123</title>
        <style>
            /* div.center{
                padding: 70px 0;
                border: 3px solid green;
                text-align: center;
            } */
             .center{
                line-height: 200px;
                height: 200px;
                border: 3px solid green;
                text-align: center;
             }
             .center p{
                line-height: 1.5;
                display: inline-block;
                vertical-align: middle;
             }
        </style>
    </head>
    <body>
        <h2>垂直居中</h2>
        <p>以上实例，我们使用 padding 属性实现元素的垂直居中：</p>
        <div class="center">
            <p>我是垂直居中的。</p>
        </div>

    </body>
</html>